<template>
	<view>
		<view style="margin-left: 20px;width: 100%;">{{ nameById(value) }}</view>
		<u-picker :show="visible" :columns="[cols]" keyName="name" @confirm="confirm"
			@cancel="$emit('update:visible', false)" />
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		props: {
			// 窗口外部开关
			visible: {
				type: Boolean,
				default: false
			},
			// 创建、修改时的数据
			value: {
				type: [Number, String],
				default: ''
			},
		},
		computed: {
			...mapGetters('goodsType', ['nameById','typeByMode']),
			/**
			 * @example brands 故障
			 * @returns {Array} 一维数组
			 */
			cols() {
				return this.typeByMode('declaration')
			}
		},
		methods: {
			/**
			 * @example 确认产品类型
			 * @param {Object} 回调参数为包含columnIndex、value、values
			 * @param {Array} indexs 索引一维数组
			 * @param {Array} value 选择的一维数组
			 * @param {Array} values 可选择的二维数组
			 */
			confirm({ indexs, value, values }) {
				const { id } = value[0]
				this.$emit('confirm', id)
				this.$emit('input', id)
				this.$emit('update:visible', false)
				return id
			}
		}
	}
</script>